<template>
	<view class="announcement mg-rl-30">
		<view class="title mg-tb-20">
			公告栏
		</view>
		<view class="oneList mg-tb-30">
			<view class="item">
				<view class="bot">
					<scroll-view scroll-x="true" class="scroll-view_H">
						<view class="li" v-for="(item,index) in noticeList" :key="index" @click="toNotice(item.id)">
							<view>
								<image class="bor-10 w100" :src="item.image"></image>
								<view class="one-ellipsis">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		getNotice
	} from '/api/common.js';

	//数据
	const noticeList = ref([])
	//方法
	async function getNnoticeList() {
			let res= await getNotice()
		 
			noticeList.value= res.data.data.map((item) => {
		
			return item
		})
		// Object.assign(noticeList, [{
		// 		img: 'https://gw.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN01UWjhcS1hWZpl7P0i2_!!6000000004285-0-yinhe.jpg_300x300q90.jpg_.webp',
		// 		title: '金三银四就业高潮期,欢迎求职者'
		// 	},
		// 	{
		// 		img: 'https://gw.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN01UWjhcS1hWZpl7P0i2_!!6000000004285-0-yinhe.jpg_300x300q90.jpg_.webp',
		// 		title: '金三银四就业高潮期'
		// 	}
		// ])
	}

	function toNotice(id) {
		uni.navigateTo({
			url: '/page_employment/noticeDetails?id='+id
		})
	}
	onMounted(() => {
		// console.log('页面加载了')
		getNnoticeList()
		console.log('noticeList...', noticeList)
	})
</script>

<style lang="scss" scoped>
	.announcement {
		.title {
			font-weight: 550;
		}
	}

	.oneList {
		width: 700rpx;
		// margin: 20rpx auto;
		background-color: #fff;

		.scroll-view_H {
			white-space: nowrap;
			width: 700rpx;
		}

		.item {
			// padding: 20rpx;
			box-shadow: 0rpx 3rpx 3rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;

			.bot {
				margin-top: 10rpx;
				overflow-x: auto;

				view:nth-child(even) {
					margin-left: 20rpx;
				}

				.li {
					padding: 10rpx;
					width: 320rpx;
					// margin-right: 20rpx;
					text-align: center;
					display: inline-block;

					// background-color: yellow;
					image {
						height: 350rpx;
					}

					view {
						color: #333;
						margin: 5rpx 0;
						font-size: 25rpx;
						text-align: left;
					}
				}
			}
		}
	}
</style>